<template>
  <a-modal
    title="配置模板选择"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="true"
      :rowKey="(record) => record.id"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <span slot="status" slot-scope="text">
        {{ statusFliter(text) }}
      </span>
      <span slot="configType" slot-scope="text">
        <template v-if="text === '1'">字符型</template>
        <template v-if="text === '2'">布尔型</template>
        <template v-if="text === '3'">整型</template>
        <template v-if="text === '4'">单选</template>
      </span>
    </s-table>
  </a-modal>
</template>
  <script>
import { page } from '@/api/modular/main/bizgatewayconfigtemplate/bizGatewayConfigTemplateManage'
import { STable } from '@/components'
import { addTemplate } from '@/api/modular/main/gatewayscene/gatewayscene'

export default {
  components: {
    STable
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      sceneId: 0,
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return page(Object.assign(parameter, this.queryParam)).then((res) => {
          return res.data
        })
      },
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      columns: [
        // 表头
        {
          title: '名称',
          dataIndex: 'configName'
        },
        {
          title: '编码',
          dataIndex: 'code'
        },
        {
          title: '类型',
          dataIndex: 'configType',
          scopedSlots: { customRender: 'configType' }
        },
        {
          title: '值',
          dataIndex: 'value'
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        }
      ]
    }
  },
  methods: {
    init (sceneId) {
      this.sceneId = sceneId
      this.visible = true
      try {
        this.$refs.table.refresh()
      } catch (e) {
        // 首次进入界面，因表格加载顺序，会抛异常，我们不予理会
      }
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    statusFliter (text) {
      if (text === 1) {
        return '启用'
      } else if (text === 0) {
        return '禁用'
      }
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    handleO () {
      this.visible = false
    },
    handleSubmit () {
        this.confirmLoading = true
        console.log(this.selectedRowKeys)
        addTemplate({ templateIds: this.selectedRowKeys, id: this.sceneId }).then(res => {
          this.confirmLoading = false
          if (res.success) {
            this.$message.success('新增成功')
            this.handleCancel()
            this.$emit('ok', this.sceneId)
          } else {
            this.$message.info('新增失败：' + res.message)
          }
        }).finally((res) => {
          this.confirmLoading = false
        })
      }
  }
}
</script>
